<template>
	<a-table :columns="columns" :data-source="tableData" :pagination="false"
		:scroll="{ x: '80%', y: TABLE_SCROLL_HEIGHT }" rowKey="id">
		<!-- <template #index="{ index }">{{ index + 1 }}</template> -->
		<template #depNum="{ text }">{{ text }}</template>
		<template #operation="{ record }">
			<div class="operation">
				<a @click.stop="Onoperation('edit', record)" class="edit">编辑</a>
				<a @click.stop="Onoperation('delete', record)" class="del">删除</a>
			</div>
		</template>
	</a-table>
</template>

<script lang="ts" setup>
	import { ref, computed } from "vue";
	import useGetTableScrollHeight from "@/utils/useGetTableScrollHeight";
	
	defineProps({
		tableData: {
			type: Array,
			default() {
				return [];
			},
		},
	});
	const EMITS = defineEmits(["operation"]);
	const TABLE_SCROLL_HEIGHT = useGetTableScrollHeight();
	
	const columns = [
		{ title: "编号", dataIndex: "depNum", ellipsis: true },
		{ title: "部门名称", dataIndex: "title", ellipsis: true, },
		{ title: "部门主管", dataIndex: "exeDirector", ellipsis: true, },
		{ title: "部门人数", dataIndex: "exeCount", ellipsis: true, },
		{ title: "上级部门", dataIndex: "depNum", ellipsis: true, slots: { customRender: "depNum" } },
		{ title: "操作", dataIndex: "operation", width: 300,align: "center", slots: { customRender: "operation" } },
	];
	
	const Onoperation = (index, row) => {
		EMITS("operation", index, row);
	};
	
</script>

<style>
</style>